<template>
  <div class="about">

    <el-container style="width: 1200px;margin: 0 auto">
      <!--左侧导航栏-->
      <el-aside width="200px" style="line-height: 0px">
        <div
            style="background-color: #487A6F;width: 195px; border-radius: 4px ;height: 35px;color:white ;font-size: 10px">
          <p style="line-height: 35px">图书分类</p></div>

        <el-popover
            placement="right"
            width="400"
            trigger="hover" v-for="parent in category_parent"
            @show="selectCategory1(parent.id)"
        >
          <el-popover
              placement="top"
              width="400"
              trigger="hover" v-for="c in category"
              @show="selectCategoryChildren(c.id)"
          >
            <el-button slot="reference" style="margin: 0px ;width: 100px; height: 50px">{{ c.name }}</el-button>

            <el-button v-for="children in category_children ">
            <a class="a1" :href="'/search?typeid='+children.id">
              {{children.name}}
            </a>
            </el-button>

          </el-popover>

          <el-button slot="reference" style="margin: 0px ;width: 190px; height: 50px">{{ parent.name }}</el-button>
        </el-popover>

      </el-aside>

      <el-container>
        <el-main>
          <!--                    轮播图-->
          <el-row :gutter="20" style="height: auto">
            <el-col :span="18">
              <div class="grid-content bg-purple">
                <div class="block">
                  <el-carousel height="315px" style="width: 700px">

                    <el-carousel-item v-for="item in imgUrlArr" :key="item.id">
                      <a href=""><img :src="item.url" style="width: 720px; height: 315px;"></a>
                    </el-carousel-item>

                  </el-carousel>
                </div>
              </div>
            </el-col>

            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-card class="box-card" style="line-height: 0px;width: 230px;  text-align: left">
                  <div slot="header" class="clearfix">
                    <span>活动</span>
                  </div>
                  <div v-for="o in activity" :key="o.id" class="text item">
                    <li><a class="a2" href="">{{ o.name }}</a></li>
                  </div>
                </el-card>

                <el-card class="box-card"
                         style="line-height: 0px;height: 195px;width: 230px; text-align: left;margin-top: 10px">
                  <div slot="header" class="clearfix">
                    <span>公告</span>
                  </div>
                  <div class="block" style="height: 195px;">
                    <el-carousel height="115px" style="width: 220px;padding: 0px;margin: 0px;background-color: white">
                      <el-carousel-item v-for="item in Notice" :key="item.id" style="background-color: white">

                        <a class="a2" href="">
<!--                          <div style="float: left"><img style="width: 90px;height: 110px" :src="item.url"></div>-->
                          <div style="float: left;margin-top: 50px;font-size: 20px">{{item.text}}</div>
                        </a>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </el-card>
              </div>
            </el-col>

          </el-row>
        </el-main>
        <!--书籍推荐-->
        <el-footer
            style="height: auto;background-color: white; margin-left: 0px ;margin: 0px!important; padding: 0px !important;">
          <el-row :gutter="20">
            <el-col :span="18">
              <div class="grid-content bg-purple">
                <div>
                  <p style="line-height: 0px;text-align: left">新书上架</p>
                  <hr style="height: 1px;background-color: red;line-height: 0px;margin-bottom: 0px">
                </div>
                <div>
                  <el-row>
                    <div class="block">
                      <span class="demonstration"></span>
                      <el-carousel height="557px">
                        <el-carousel-item v-for="item in size" :key="item" style="background-color: white">
                          <el-row :gutter="20">
                            <el-col style="margin: 10px 0" :span="6" v-for="g in goodArr[item-1]">
                              <el-card style="height: 250px">
                                <a :href="'/deil?id='+g.id">
                                  <img style="height: 100px" class="p_img" :src="g.url" width="100%" alt="">
                                </a>
                                <div>
                                  <p style="font-size: 15px;height: 40px;margin-top: 0;line-height: 10px;margin: 10px">
                                    <a style="text-decoration: none;color: #3f3f3f;font-size:smaller" :href="'/deil?id='+g.id">
                                      {{ g.name }}
                                    </a>
                                  </p>
                                  <p style="font-size: 12px;color: #666;margin-top: 10px;line-height: 20px">
                                    ￥{{ g.money }}浏览量：100 <br>库存:{{g.num}}
                                    <span style="float: right">销量:{{ g.nums }}件</span>
                                  </p>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>

                        </el-carousel-item>
                      </el-carousel>
                    </div>
                  </el-row>

                </div>
              </div>
            </el-col>
            <!--排行榜-->
            <el-row>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-card style="width: 240px">
                    <h3 style="line-height: 0px;margin: 0px">
                      <i class="el-icon-trophy">销量排行</i>
                    </h3>
                    <el-divider></el-divider>
                    <el-table
                        :data="topNumsArr"
                        style="width: 100%;">
                      <el-table-column type="index"  label="排名">
                      </el-table-column>
                      <el-table-column   show-overflow-tooltip="" prop="name" label="图书名称" width="100"style="line-height:10px !important;height: 10px!important;overflow:hidden;text-overflow:ellipsis" >
                        <template slot-scope="scope">
                          <el-button show-overflow-tooltip=""  style="width: 20px; margin-left: 0px;padding:0px;background-color:rgba(0,0,0,0); border: 0px " @click.stop="deil(scope.row.id)" v-text="scope.row.name"></el-button>
                        </template>
                      </el-table-column>
                      <el-table-column prop="nums" label="销量">
                      </el-table-column>

                    </el-table>
                  </el-card>

                </div>
              </el-col>

            </el-row>
          </el-row>
        </el-footer>

      </el-container>
    </el-container>

    <el-footer style="height: auto; width: 1200px; margin: 0 auto ;clear: right!important;">
      <div class="el-row">
      <el-row :gutter="20" style="clear: none!important; ">
        <el-col :span="18" >
          <div class="grid-content bg-purple"  style="clear: none!important;">
            <div  style="clear: none!important;">
              <p style="line-height: 0px;text-align: left">官方推荐</p>
              <hr style="height: 1px;background-color: red;line-height: 0px;margin-bottom: 0px">
            </div>
            <div>
              <el-row  style="clear: none!important;" >

                <el-row :gutter="20"  style="clear: none!important;">
                  <el-col style="margin: 10px 0" :span="6" v-for="g in goodArrs">
                    <el-card style="height: 250px">
                      <a :href="'/deil?id='+g.id">
                        <img style="height: 100px" class="p_img" :src="g.url" width="100%" alt="">
                      </a>
                      <div>
                        <p style="font-size: 15px;height: 40px;margin-top: 0">
                          <a style="text-decoration: none;color: #3f3f3f;font-size:smaller" :href="'/deil?id='+g.id">
                            {{g.name}}
                          </a>
                        </p>
                        <p style="font-size: 12px;color: #666;margin-top: 10px;line-height: 20px">
                          ￥{{ g.money }}浏览量：100 <br>库存:{{g.num}}
                          <span style="float: right">销量:{{ g.nums }}件</span>
                        </p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-row>

            </div>
          </div>
        </el-col>
        <!--排行榜-->
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-card style="width:290px">
                <h3 style="line-height: 0px;margin: 0px">
                  <i class="el-icon-trophy">评论排行</i>
                </h3>
                <el-divider></el-divider>
                <el-table
                    :data="topCommentArr"
                    style="width: 100%">
                  <el-table-column type="index" label="排名">
                  </el-table-column>
                  <el-table-column   show-overflow-tooltip="" prop="name" label="图书名称" width="100"style="line-height:10px !important;height: 10px!important;overflow:hidden;text-overflow:ellipsis" >
                    <template slot-scope="scope">
                      <el-button show-overflow-tooltip=""  style="width: 20px; margin-left: 0px;padding:0px;background-color:rgba(0,0,0,0); border: 0px " @click.stop="deil(scope.row.id)" v-text="scope.row.name"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="comments" label="评论量">

                  </el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-col>
      </el-row>

      </div>
    </el-footer>

    <el-footer v-if="advertisement"
               style=" bottom: 0px!important; width: 100% !important;  height:140px!important;bottom: 0px!important; background-color: rgba(14,0,0,0.49);position: fixed!important;z-index: 9999; left: 0px">
      <div>
        <img src="http://img60.ddimg.cn/ddimg/2353/yinliubanner-1640156285.gif">
        <el-button style="position: absolute; color: white;border: 0px; background-color: rgba(249,249,249,0)"
                   icon="el-icon-circle-close" @click="advertisementUP()"></el-button>
      </div>
    </el-footer>

  </div>
</template>

<script>
export default {
  data() {
    return {
      Notice:[{id:1,text:'无公告'}],
      activity:[{id:1,name:'无活动'}],
      addressArr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      address: "北京",
      advertisement: true,//广告显示和关闭
      text: "",//搜索框
      category: [],
      category_parent: [],
      category_children: [],
      hotArr: [{name: "小计"}, {name: "小雅"}],//热搜
      activeIndex: '2',
      activeIndex2: '3',
      imgUrlArr: [],//轮播图
      contentArr: [{content: "满100减50"}, {content: "满100减50"}, {content: "满100减50"},],
      goodArr:[[{name: "满100减50",id:1},{name: "满100减50",id:2}],[{name: "满150",id:3},{name: "满1050",id:4}]],//商品
      goodArrs:[[{name: "满100减50",id:1},{name: "满100减50",id:2}],[{name: "满150",id:3},{name: "满1050",id:4}]],//商品
      size:2,
      topNumsArr: [{name: "asd11111111111111"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"},],
      topCommentArr: [{name: "asd11111111111"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"},]
    };
  },
  methods: {
    deil(id){
      console.log("id"+id)
      location.href="/deil?id="+id;
    },
    addressUpdata(name) {
      this.address = name;
    },
    advertisementUP() {
      this.advertisement = false;
    },
    selectCategory1(id) {
      //查询儿子级类别
      console.log('id = ' + id);
      let url = 'http://localhost:8080/indexs/' + id + '/selectCategoryById';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category = responseBody.data;
      });
    },
    selectCategoryParent() {
      //查询父级级类别
      let url = 'http://localhost:8080/indexs/selectCategoryParent';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category_parent = responseBody.data;
      });
    },
    selectCategoryChildren(id){
      //查询孙子级类别
      console.log('id = ' + id);
      let url = 'http://localhost:8080/indexs/' + id + '/selectCategoryChildrenById';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.category_children = responseBody.data;
      });
    },
    selectCarouselChartList(id){
      //查询轮播图
      console.log('id = ' + id);
      let url = 'http://localhost:8080/carouselcharts/CarouselChartList';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.imgUrlArr = responseBody.data;
      });
    },
    selectGoodsList(){
      //查询商品
      let url = 'http://localhost:8080/goods/goodsList';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.goodArr = responseBody.data;
        this.size=this.goodArr.length;
        console.log(this.size)
      });
    },
    selectGoodsListBySort(){
      //查询商品
      let url = 'http://localhost:8080/goods/selectGoodsListBySort';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.goodArrs = responseBody.data;
      });
    },
   selectGoodsListByNums() {//查询销量排序商品
     let url = 'http://localhost:8080/indexs/selectGoodsListByNums';
     this.axios.get(url).then((response) => {
       console.log('response = ' + response);
       let responseBody = response.data;
       this.topNumsArr = responseBody.data;
     });
    },
    selectGoodsListByComments() {//查询销量排序商品
     let url = 'http://localhost:8080/indexs/selectGoodsListByComments';
     this.axios.get(url).then((response) => {
       console.log('response = ' + response);
       let responseBody = response.data;
       this.topCommentArr = responseBody.data;
     });
    },
    selectActivity(){
      let url = 'http://localhost:8080/indexs/selectActivity';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.activity = responseBody.data;
      });
    }, selectNotice(){
      let url = 'http://localhost:8080/indexs/selectNotice';
      this.axios.get(url).then((response) => {
        console.log('response = ' + response);
        let responseBody = response.data;
        this.Notice = responseBody.data;
      });
    },
    getUserLogin() {
      let url = "http://localhost:8080/indexs/getUserLogin"
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.data != null) {
          this.advertisement=false;
        }
      });
    },
  },
  mounted() {
    this.selectCategoryParent();//查询父级类别
    this.selectCarouselChartList();//查询轮播图
    this.selectGoodsList();//查询新上架商品
    this.selectGoodsListBySort();//查询推荐商品
    this.selectGoodsListByNums();//查询销量排序商品
    this.selectGoodsListByComments();//查询评论排序商品
    this.selectActivity();//查询评论排序商品
    this.selectNotice();//查询评论排序商品

  },created() {
    this.getUserLogin();
  }
}
</script>
<style>
body {
  margin: 0 auto;
}
.el-row::after {

}
.el-header, .el-footer {
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-aside {
  /*background-color: #D3DCE6;*/
  /*color: #333;*/
  text-align: center;
  line-height: 200px;
}

.el-main {
  /*background-color: #E9EEF3;*/

  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 10px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}


.el-dropdown-menu__item {
  font-size: 10px;
}

.a1 {
  text-decoration: none;
  font: 12px 'Hiragino Sans GB', "simsun", "Arial";
  color: #646464;
  line-height: 0px;
}

.a1:hover {
  color: red;
}

.a2 {
  text-decoration: none;
  font: 12px 'Hiragino Sans GB', "simsun", "Arial";
  color: #646464;
  line-height: 0px;
}

.a2:hover {
  color: red;
  text-decoration: underline;
}

/*搜索，购物车订单按钮的共用*/
.el-button {
  border-radius: 0px;
}

#button1:hover {
  background-color: white;
  color: red;
}

/*左侧导航*/
.el-menu-demo {
  width: 190px;
  text-align: left;
  background-color: white;

}

/*.el-row {*/
/*    margin-bottom: 20px;*/

/*&*/
/*:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*}*/
/*.el-col {*/
/*    border-radius: 4px;*/
/*}*/

/*.bg-purple-dark {*/
/*    background: #99a9bf;*/
/*}*/

/*.bg-purple {*/
/*    background: #d3dce6;*/
/*}*/

/*.bg-purple-light {*/
/*    background: #e5e9f2;*/
/*}*/

/*.grid-content {*/
/*    border-radius: 4px;*/
/*    min-height: 36px;*/
/*}*/

/*.row-bg {*/
/*    padding: 10px 0;*/
/*    background-color: #f9fafc;*/
/*}*/
/*轮播图*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*  公告  */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 230px;
  height: 110px;
  border: 1px solid rgba(0, 0, 0, 0.58);
}

/*    展示*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: none;
}
.el-row1::after{
  clear: none;
}
</style>